<template>
  <div class="CareerPlan">
    <div class="CareerPlan_boxtop">
      <div class="CareerPlan_top">
        <div class="CareerPlan_top_box">
          <router-link to="/">
            <img
              class="CareerPlan_top_logo"
              src="https://huizeimg.oss-cn-shenzhen.aliyuncs.com/huize/update/156222927235720190704163413.jpg"
              alt
            />
          </router-link>

          <div class="CareerPlan_top_content">生涯规划</div>
        </div>
      </div>
    </div>
    <div class="CareerPlan_bottom">
      <div class="CareerPlan_boxbottom">
        <div class="CareerPlan_bottom_option">
          <router-link to="/">
            <span>首页</span>
          </router-link>
          <span>></span>
          <span>生涯规划</span>
          <span>></span>
          <span>MBTI性格测试</span>
        </div>
        <div class="big_box">
          <div class="test_box" v-for="(item,index) in questionList" :key="index">
            <div v-if="show==index">
              <div class="test_title">{{index+1}}、{{item.careerSubject}}</div>
              <div class="test_answer_box">
                <div
                  class="answerA"
                  @click="gonextA(index,item.type,item.id)"
                >A、{{item.careerPlanningEntitie.careerAOption}}</div>
                <div
                  class="answerB"
                  @click="gonextB(index,item.type,item.id)"
                >B、{{item.careerPlanningEntitie.careerBOption}}</div>
              </div>
            </div>
          </div>
          <div class="submitbox">
            <el-button class="submit" v-if="show==92" @click="openFullScreen2">提交</el-button>
            <el-button class="golast" @click="toPrevious" v-if="show!=0">上一题</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TestQuestion",
  data() {
    return {
      show: 0,
      radio: "0",
      questionList: [],
      answerList: [],
      type: ""
    };
  },
  methods: {
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: "正在分析数据",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      setTimeout(() => {
        loading.close();
        this.$ajax({
          method: "post",
          url: "/api/careerplanning/setAdmissionDetails",
          // data: this.answerList,
          data: this.answerList,

          success: res => {
            const type = res.data.data;
            if (res.data.code == 0) {
              this.$router.push({
                name: "/OccupationTest/TextResult",
                params: {
                  type: type
                }
              });
            } else {
            }
          }
        });
      }, 2000);
      console.log(this.answerList);
    },
    gonextA(index, type, id) {
      this.answerList.splice(index, 1, { id: id, answer: "A", type: type });
      console.log(this.answerList);
      if (this.show < this.questionList.length - 1) {
        this.show = index + 1;
      } else {
      }
    },
    gonextB(index, type, id) {
      this.answerList.splice(index, 1, { id: id, answer: "B", type: type });
      console.log(this.answerList);
      if (this.show < this.questionList.length - 1) {
        this.show = index + 1;
      } else {
      }
    },
    toPrevious() {
      this.show -= 1;
    },
    getQuestion() {
      this.$ajax({
        method: "post",
        url: "/api/careerplanning/getAdmissionDetails?type=" + 0,

        success: res => {
          if (res.data) {
            this.questionList = res.data.data.careerSubjectEntities;
          }
        }
      });
    }
  },

  beforeCreate() {
    this.$nextTick(() => {
      this.getQuestion();
    });
  }
};
</script>
<style lang="scss" scoped>
.CareerPlan {
  background-color: #f6f6f6;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .CareerPlan_boxtop {
    background-color: #ffffff;
    height: 68.6px;
    .CareerPlan_top {
      margin: 0 auto;
      width: 1200px;
      height: 68.6px;
      .CareerPlan_top_box {
        width: 170.6px;
        height: 68.6px;
        .CareerPlan_top_logo {
          width: 50px;
          padding-top: 12.5px;
          margin-right: 24px;
        }
        .CareerPlan_top_content {
          display: inline;
          font-size: 22px;
          color: #515151;
          float: right;
          line-height: 68.6px;
        }
      }
    }
  }
  .CareerPlan_bottom {
    height: 600px;
    width: 100%;
    background-color: #f6f6f6;
    .CareerPlan_boxbottom {
      width: 1200px;
      margin: 0 auto;
      .CareerPlan_bottom_option {
        padding-top: 27px;
        span {
          color: #757575;
          font-size: 15px;
        }
      }
      .big_box {
        .test_box {
          .test_title {
            margin-top: 50px;
            font-size: 16px;
            color: #414141;
            font-weight: 550;
          }
          .test_answer_box {
            margin-top: 20px;
            font-size: 14px;
            color: #8b8b8b;
            .answerA {
              height: 54px;
              background-color: #f0f0f0;
              border-radius: 5px;
              line-height: 54px;
              padding-left: 32px;
              margin-bottom: 8px;
              color: #8b8b8b;
              cursor: pointer;
            }
            .answerA:hover {
              color: blue;
              cursor: pointer;
            }
            .answerB:hover {
              color: blue;
              cursor: pointer;
            }
            .answerB {
              cursor: pointer;
              height: 54px;
              background-color: #f0f0f0;
              border-radius: 5px;
              line-height: 54px;
              padding-left: 32px;
            }
          }
        }
        .submitbox {
          margin-top: 100px;
          margin-bottom: 200px;
          .golast {
            width: 200px;
            height: 50px;
            background-color: #f0f0f0;
            text-align: center;
            border-radius: 5px;
            margin-left: 200px;
            float: left;
            cursor: pointer;
          }
          .submit {
            margin-left: 400px;
            background-color: #f0f0f0;

            width: 200px;
            height: 50px;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
.router-link-active {
  text-decoration: none;
}
</style>